<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>商品列表页面</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/javascript.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/httpVueLoader.js"></script>
	<script type="text/javascript" src="../js/index.js"></script>
	<script type="text/javascript" src="../js/node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="productListApp">
	<top-protal></top-protal>

	<div id="middle">
		<div id="position">
			您现在的位置是&nbsp;&gt;&nbsp;<a href="index.jsp">网上商城</a>&nbsp;&gt;&nbsp;商品
		</div>
		<div id="lefter">
			<div id="childNav">
				<h2>商品导航</h2>
				<dl>
					<c:forEach var="categoryparent" items="${categorylist}">
						<c:if test="${categoryparent.category_parent==0}">
							<dt>${categoryparent.category_name}</dt>
							<c:forEach var="categorychildren" items="${categorylist}">
								<c:if test="${categorychildren.category_parent==categoryparent.category_id}">
									<dd><a href="../ProductServlet?action=productlistbycategory&category_id=${categorychildren.category_id}">${categorychildren.category_name}</a></dd>
								</c:if>
							</c:forEach>
						</c:if>
					</c:forEach>
				</dl>
			</div>
		</div>
		<div id="main">
			<p>&gt;商品列表</p>
			<ul>
				<c:set var="row" value="10"></c:set>
				<c:forEach var="product" items="${productlist}">
					<li>
						<img src="../images/productImg/${product.product_imgurl}"/>
						<div><a href="../ProductServlet?action=product&product_id=${product.product_id}">${product.product_describe}</a></div>
						￥<span>${product.product_price}</span>元
					</li>
					<c:if test="${row>0}">
						<c:set var="row" value="${row-1}"></c:set>
					</c:if>
				</c:forEach>
				<c:if test="${row>0}">
					<c:forEach begin="1" end="${row}" step="1">
						<li style="border:1px solid #FFFFFF"></li>
					</c:forEach>
				</c:if>
			</ul>
		</div>
	</div>

	<bottom></bottom>
</div>
<script type="text/javascript">
	Vue.use(httpVueLoader);
	const app = new Vue({
		el: "#productListApp",
		data: {

		},
		created() {
			this.loadData();
		},
		methods: {
			loadData() {

			},
		},
		components: {
			'top-protal': 'url:../common/top-protal.vue',
			'bottom': 'url:../common/bottom.vue',
		},
	});
</script>


</body>
</html>